<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- viewport meta to reset iPhone inital scale -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prototype: Commodity & Energy Spot Market Platform</title>
    <!-- css3-mediaqueries.js for IE8 or older -->
    <!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link type="text/css" href="style/ui.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="scripts/highcharts/highstock.js"></script>
    <script type="text/javascript" src="scripts/highcharts/modules/exporting.js"></script>


    <script type="text/javascript" src="scripts/highcharts/highChartsGlobalSetting.js"></script>
    <script type="text/javascript" src="scripts/highcharts/goldPriceChart.js"></script>
    <script type="text/javascript" src="scripts/highcharts/oilPriceStackChart.js"></script>

</head>
<body>
    <div id="pagewrap">
        <div id="header">
            <h1>
                Prototype: Commodity & Energy Spot Market Platform</h1>
            <p>
                Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">
                    related article</a>)</p>
            <!-- <div style="width:100%;height: 40px;" class="debug"> -->
            <nav class="nav">
			<ul>
				<li class="current"><a href="#">HOME</a></li>
				<li><a href="#">SPOT MARKET</a></li>
				<li><a href="#">FUTURE MARKET</a></li>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">ABOUT US</a></li>
			</ul>
			<form class="search" >
				<input type="search" placeholder="Search"/>
			</form>
		</nav>
        </div>
        <div id="content">
            <h2>
                Summary</h2>
            <div id="container" class="chartContainer">
            </div>
            <div id="container2" class="chartContainer">
            </div>
        </div>
        <div id="sidebar">
            <div class="hd rtq_hd">
                <div class="title">
                    <h2>
                        Gold Apr 13 (GCJ13.CMX)</h2>
                    <span class="rtq_exch"><span class="rtq_dash">-</span>COMEX </span>
                </div>
            </div>
            <div id="yfi_quote_summary_data" class="rtq_table">
                <table id="table1">
                    <tr>
                        <th scope="row" width="48%">
                            Prev Settlement:
                        </th>
                        <td class="yfnc_tabledata1">
                            N/A
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" width="48%">
                            Open:
                        </th>
                        <td class="yfnc_tabledata1">
                            1,573.00
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" width="48%">
                            Bid:
                        </th>
                        <td class="yfnc_tabledata1">
                            N/A
                        </td>
                    </tr>
                    <tr class="end">
                        <th scope="row" width="48%">
                            Ask:
                        </th>
                        <td class="yfnc_tabledata1">
                            N/A
                        </td>
                    </tr>
                </table>
                <table id="table2">
                    <tr>
                        <th scope="row" width="48%">
                            Day&#39;s Range:
                        </th>
                        <td class="yfnc_tabledata1">
                            <span><span id="yfs_g00_gcj13.cmx">1,573.00</span></span> - <span><span id="yfs_h00_gcj13.cmx">
                                1,573.00</span></span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" width="48%">
                            Volume:
                        </th>
                        <td class="yfnc_tabledata1">
                            <span id="yfs_v00_gcj13.cmx">12,982</span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" width="48%">
                            Open Interest:
                        </th>
                        <td class="yfnc_tabledata1">
                            N/A
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" width="48%">
                            Session:
                        </th>
                        <td class="yfnc_tabledata1">
                        </td>
                    </tr>
                    <tr class="end">
                        <th scope="row" width="48%">
                            Exp. Date:
                        </th>
                        <td class="yfnc_tabledata1">
                            N/A
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="footer">
            <span class="FooterCopyright" title="@2013  Thomson Reuters. All rights reserved.">&copy;
                2013 Thomson Reuters. All rights reserved.</span>
        </div>
    </div>
</body>
</html>
